"use client";

import styles from "./home.module.scss";
import {SideBar} from "@/app/components/sidebar/sidebar";
import {DialogMessage} from "@/app/components/dialog/dialog-message";
import {RoleDetail} from "@/app/components/role/role-detail";
import evenBusUtils from "@/utils/evenBusUtils"; //总线
// import {
//     HashRouter as Router,
//     Routes,
//     Route,
// } from "react-router-dom";
import {
    MemoryRouter  as Router,
    Routes,
    Route,
} from "react-router-dom";
// import dynamic from "next/dynamic";
import {Path} from "@/app/constants";

import {useAppConfig} from "../../store/config";

import dynamic from "next/dynamic";
import {useState} from "react";

// 动态导入 HashRouter 组件
const DynamicHashRouter = dynamic(() => import("react-router-dom").then((module) => ({ default: module.HashRouter })), {
    ssr: false // 禁用服务器端渲染
});
const Chat = dynamic(async () => (await import("../chat/chat")).Chat);
const Role = dynamic(async () => (await import("../role/role")).Role);

function Screen() {
    const config = useAppConfig();

    evenBusUtils.on('isSidebarVisible', (eventData) => {
        // 处理事件
        setIsSidebarVisible(eventData);
    });
    const [isSidebarVisible, setIsSidebarVisible] = useState(true);
    return (
        // styles.container
        <div className={`${config.tightBorder ? styles["tight-container"] : ""}`}>
            <div className={isSidebarVisible?styles.container:styles.container1}>
            {/* 工具菜单 */}
            <SideBar/>
            {/* 路由地址 */}
            <div className={styles["window-content"]}>
                <Routes>
                    <Route path={Path.Home} element={<Chat/>}/>
                    <Route path={Path.Chat} element={<Chat/>}>
                        <Route path=":id" element={<DialogMessage/>}/>
                    </Route>
                    <Route path={Path.Role} element={<Role/>}>
                        <Route path=":id" element={<RoleDetail/>}/>
                    </Route>
                </Routes>
            </div>
            </div>
        </div>
    );
}

export function Home() {
    return (
        <DynamicHashRouter>
            <Screen/>
        </DynamicHashRouter>
    );
}